<script lang="ts">
	import { page } from '$app/state';
	import type { MemberInfo } from '$lib/api/proto/roadmap_member_api';
	import { USER_ROLE } from '$lib/api/proto/user_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { UserRound } from 'lucide-svelte';
	import PlanList from './PlanList.svelte';

	let PAGE_SIZE = 20;

	const roadmapId = page.url.searchParams.get('roadmapId') ?? '';

	let memberList = $state([] as MemberInfo[]);
	let totalCount = $state(0);
	let curPage = $state(0);

	const pageCount = $derived(Math.ceil(totalCount / PAGE_SIZE));

	let curMemberUserId = $state('');

	async function loadMemberList() {
		if (userStore.userSession == null) {
			return;
		}
		const res = await callApi(
			appStore.roadmapMemberApiClient.listMember({
				sessionId: userStore.userSession,
				roadmapId: roadmapId,
				offset: PAGE_SIZE * curPage,
				limit: PAGE_SIZE
			}).response
		);
		memberList = res.memberList;
		totalCount = res.totalCount;
		if (curMemberUserId == '' && memberList.length > 0) {
			curMemberUserId = memberList[0].memberUserId;
		}
	}

	$effect(() => {
		if (userStore.userInfo?.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH) {
			loadMemberList();
		}
	});
</script>

<div class="ml-[100px] mr-[100px] flex">
	{#if userStore.userInfo?.basicInfo?.userRole == USER_ROLE.USER_ROLE_COACH && curMemberUserId != ''}
		<div class="w-[200px] text-xl h-[calc(100vh-110px)] overflow-y-auto overflow-x-hidden">
			<ul class="menu rounded-box flex-nowrap">
				{#each memberList as member}
					<li>
						<button
							class={member.memberUserId == curMemberUserId ? 'menu-active' : ''}
							onclick={() => (curMemberUserId = member.memberUserId)}
						>
							<div class="m-1 w-[150px] flex gap-2">
								<div class="avatar">
									<div class="w-[24px] rounded-full">
										{#if member.memberLogouri == ''}
											<UserRound />
										{:else}
											<img alt="avatar" src={member.memberLogouri} />
										{/if}
									</div>
								</div>
								{member.memberDisplayName}
							</div>
						</button>
					</li>
				{/each}
			</ul>
			<div class="relative h-[40px]">
				{#if pageCount > 1}
					<div class="join bg-base-200 absolute right-0">
						{#if curPage != 0}
							<button
								class="join-item btn btn-xs {curPage == 0 ? 'btn-active' : ''}"
								onclick={() => (curPage = 0)}>1</button
							>
						{/if}
						{#if pageCount > 3 && curPage > 1}
							<button class="join-item btn btn-xs btn-disabled">...</button>
						{/if}
						{#if curPage < pageCount}
							<button class="join-item btn btn-xs btn-active">{curPage + 1}</button>
						{/if}
						{#if curPage + 1 < pageCount}
							<button class="join-item btn btn-xs" onclick={() => (curPage += 1)}
								>{curPage + 2}</button
							>
						{/if}
						{#if pageCount - curPage > 4}
							<button class="join-item btn btn-xs btn-disabled">...</button>
						{/if}
						{#if pageCount - curPage > 3}
							<button class="join-item btn btn-xs" onclick={() => (curPage = pageCount - 2)}
								>{pageCount - 1}</button
							>
						{/if}
						{#if pageCount - curPage > 2}
							<button class="join-item btn btn-xs" onclick={() => (curPage = pageCount - 1)}
								>{pageCount}</button
							>
						{/if}
					</div>
				{/if}
			</div>
		</div>
		<div class="divider divider-horizontal"></div>
		<PlanList {roadmapId} memberUserId={curMemberUserId} />
	{:else if userStore.userInfo?.basicInfo?.userRole == USER_ROLE.USER_ROLE_STUDENT}
		<PlanList {roadmapId} memberUserId={userStore.userInfo.userId ?? ''} />
	{/if}
</div>
